<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<form name="$ctrl.form"
      ng-submit="$ctrl.deploy()"
      novalidate>
  <kd-help-section>
    <md-input-container class="md-block"
                        md-is-error="$ctrl.isNameError()">
      <label>[[App name|Label 'App name', which appears as a placeholder in an empty input field on the deploy from settings page.]]</label>
      <div>
        <input ng-model="$ctrl.name"
               name="name"
               namespace="$ctrl.namespace"
               required
               ng-pattern="$ctrl.namePattern"
               ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
               kd-unique-name
               md-maxlength="{{$ctrl.nameMaxLength}}">
        <md-progress-linear class="kd-deploy-form-progress"
                            md-mode="indeterminate"
                            ng-class="{'kd-deploy-form-progress-show': $ctrl.form.name.$pending}">
        </md-progress-linear>
        <ng-messages for="$ctrl.form.name.$error"
                     role="alert"
                     multiple>
          <ng-message when="required">[[Application name is required.|Appears to tell the user that app name input on the deploy from settings page is required.]]</ng-message>
          <ng-message when="uniqueName">
            [[Deployment or service with this name already exists within namespace.|Appears as warning when the user has typed in an app name that already exists. The text is followed by a specific namespace name.]]
            <i>{{$ctrl.namespace}}</i>.
          </ng-message>
          <ng-message when="pattern">
            [[Application name must start with a lowercase letter and contain only lowercase letters, numbers, and '-' between words.|Appears when the app name input on the deploy from settings page does not match the expected pattern.]]
          </ng-message>
          <ng-message when="md-maxlength">
            [[Name must be up to {{$ctrl.nameMaxLength}} characters long.|Name max length warning on deploy from settings page.]]
          </ng-message>
        </ng-messages>
      </div>
    </md-input-container>

    <kd-user-help>
      [[An 'app' label with this value will be added to the Deployment and Service that get deployed.|User help for name field on deploy from settings page.]]
      <a href="http://kubernetes.io/docs/user-guide/labels/"
         target="_blank"
         tabindex="-1">
        [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <md-input-container class="md-block">
      <label>[[Container image|Container image label on the deploy from settings page.]]</label>
      <input ng-model="$ctrl.containerImage"
             name="containerImage"
             required
             ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
             kd-valid-imagereference
             invalid-image-error-message="$ctrl.containerImageErrorMessage">
      <ng-messages for="$ctrl.form.containerImage.$error"
                   role="alert"
                   multiple>
        <ng-message when="required">
          [[Container image is required|Container image is required warning on deploy from settings page.]]
        </ng-message>
        <ng-message when="validImageReference">
          [[Container image is invalid:|Container image is invalid warning on deploy from settings page.]] {{ $ctrl.containerImageErrorMessage }}
        </ng-message>
      </ng-messages>
    </md-input-container>
    <kd-user-help>
      [[Enter the URL of a public image on any registry, or a private image hosted on Docker Hub or Google Container Registry.|User help for container image on deploy from settings page.]]
      <a href="http://kubernetes.io/docs/user-guide/images/"
         target="_blank"
         tabindex="-1">
          [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <md-input-container class="md-block">
      <label>[[Number of pods|Number of pods label on the deploy from settings page.]]</label>
      <input ng-model="$ctrl.replicas"
             type="number"
             required
             min="1"
             name="replicas"
             kd-validate="integer"
             kd-warn-threshold="100"
             kd-warn-threshold-bind="showWarning">
      <ng-messages for="$ctrl.form.replicas.$error"
                   role="alert"
                   multiple>
        <ng-message when="required">
          [[Number of pods is required|Number of pods is required warning on deploy from settings page.]]
        </ng-message>
        <ng-message when="number, kdValidInteger">
          [[Number of pods must be a positive integer|Number of pods must be a positive integer warning on deploy from settings page.]]
        </ng-message>
        <ng-message when="min">[[Number of pods must be at least 1|Number of pods must be at least 1 warning on deploy from settings page.]]</ng-message>
      </ng-messages>
      <span class="kd-warn-threshold"
            ng-show="showWarning">
        [[Setting high number of pods may cause performance issues of the cluster and Dashboard UI.|High number of pods warning on deploy from settings page.]]
      </span>
    </md-input-container>
    <kd-user-help>
      [[A Deployment will be created to maintain the desired number of pods across your cluster.|User help for number of pods on deploy from settings page.]]
      <a href="https://kubernetes.io/docs/concepts/workloads/controllers/deployment/"
         target="_blank"
         tabindex="-1">
          [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <kd-port-mappings port-mappings="$ctrl.portMappings"
                      protocols="$ctrl.protocols"
                      is-external="$ctrl.isExternal">
    </kd-port-mappings>
    <kd-user-help>
      [[Optionally, an internal or external Service can be defined to map an incoming Port to a target Port seen by the container.|Use help for port mapping on deploy from settings page.]]
      <span ng-if="$ctrl.name">
        [[The internal DNS name for this Service will be:|User help for DNS name on deploy from settings page.]] <span class="kd-emphasized">{{$ctrl.name}}</span>.
      </span>
      <a href="http://kubernetes.io/docs/user-guide/services/"
         target="_blank"
         tabindex="-1">
          [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <!-- advanced options -->
  <div ng-show="$ctrl.isMoreOptionsEnabled()">
    <kd-help-section>
      <md-input-container>
        <label>[[Description|Description label on deploy from settings page.]]</label>
        <textarea ng-model="$ctrl.description"></textarea>
      </md-input-container>
      <kd-user-help>
        [[The description will be added as an annotation to the Deployment and displayed in the application's details.|User help for description on deploy from settings page.]]
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div layout="column">
        <div class="kd-label-title md-body-2">[[Labels|Labels subheader on deploy from settings page.]]</div>
        <div layout="row"
             class="kd-label-header-row">
          <div flex="45">[[Key|Label key label on deploy from settings page.]]</div>
          <div flex="5"></div>
          <div flex="40">[[Value|Label value label on deploy from settings page.]]</div>
        </div>
        <div ng-repeat="label in $ctrl.labels">
          <kd-deploy-label layout="row"
                           flex="auto"
                           label="label"
                           labels="$ctrl.labels">
          </kd-deploy-label>
        </div>
      </div>

      <kd-user-help>
        [[The specified labels will be applied to the created Deployment, Service (if any) and Pods. Common labels include release, environment, tier, partition and track.|User help for the labels section on the deploy from settings page.]]
        <a href="http://kubernetes.io/docs/user-guide/labels/"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <md-input-container class="md-block">
        <label>[[Namespace|Namespace label on the deploy from settings page.]]</label>
        <md-select ng-model="$ctrl.namespace"
                   ng-click="$ctrl.resetImagePullSecret()"
                   required>
          <md-option ng-repeat="namespace in $ctrl.namespaces"
                     ng-value="namespace">
            {{namespace}}
          </md-option>
          <md-option ng-click="$ctrl.handleNamespaceDialog($event)">
            [[Create a new namespace...|Create new namespace label on deploy from settings page.]]
          </md-option>
        </md-select>
      </md-input-container>
      <kd-user-help>
        [[Namespaces let you partition resources into logically named groups.|User help for the namespace selection on the deploy from settings page.]]
        <a href="http://kubernetes.io/docs/admin/namespaces/"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <md-input-container class="md-block">
        <label>[[Image Pull Secret|Image pull secret label on deploy from settings page.]]</label>
        <md-select ng-model="$ctrl.imagePullSecret"
                   ng-click="$ctrl.getSecrets($ctrl.namespace)">
          <md-option ng-repeat="secret in $ctrl.secrets"
                     ng-value="secret">
            {{secret}}
          </md-option>
          <md-option ng-click="$ctrl.handleCreateSecretDialog($event)">
            [[Create a new secret...|Create new secret label on deploy from settings page.]]
          </md-option>
        </md-select>
      </md-input-container>
      <kd-user-help>
        [[The specified image could require a pull secret credential if it is private. You may choose an existing secret or create a new one.|User help for the image pull secret selection box on the deploy from settings page.]]
        <a href="http://kubernetes.io/docs/user-guide/secrets/"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div layout="row">
        <md-input-container flex="auto">
          <label>[[CPU requirement (cores)|CPU requirement label on the deploy from settings page.]]</label>
          <input ng-model="$ctrl.cpuRequirement"
                 type="number"
                 name="cpuRequirement"
                 min="0">
          <ng-messages for="$ctrl.form.cpuRequirement.$error"
                       role="alert"
                       multiple>
            <ng-message when="number">
              [[CPU requirement must be given as a valid number.|Appears to tell the user that the typed in CPU cores count on the deploy page is not a number.]]
            </ng-message>
            <ng-message when="min">
              [[CPU requirement must be given as a positive number.|Appears to tell the user that the typed in number of CPU cores cannot be negative.]]
            </ng-message>
          </ng-messages>
        </md-input-container>
        <div flex="5"></div>
        <md-input-container flex="auto">
          <label>[[Memory requirement (MiB)|Memory requirement label on the deploy from settings page.]]</label>
          <input ng-model="$ctrl.memoryRequirement"
                 type="number"
                 name="memoryRequirement"
                 min="0">
          <ng-messages for="$ctrl.form.memoryRequirement.$error"
                       role="alert"
                       multiple>
            <ng-message when="number">
              [[Memory requirement must be given as a valid number.|Appears to tell the user that the typed in memory on the deploy page is not a number.]]
            </ng-message>
            <ng-message when="min">
              [[Memory requirement must be given as a positive number.|Appears to tell the user that the typed in memory (on the deploy page) cannot be negative.]]
            </ng-message>
          </ng-messages>
        </md-input-container>
      </div>
      <kd-user-help>
        [[You can specify minimum CPU and memory requirements for the container.|User help for the memory and cpu requirement inputs on the deploy from settings page.]]
        <a href="http://kubernetes.io/docs/admin/limitrange/"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div>
        <md-input-container class="md-block">
          <label>[[Run command|Run command label (a noun, not a verb) on the deploy from settings page.]]</label>
          <input ng-model="$ctrl.containerCommand">
        </md-input-container>

        <md-input-container class="md-block">
          <label>[[Run command arguments|Run command arguments label on the deploy from settings page.]]</label>
          <input ng-model="$ctrl.containerCommandArgs">
        </md-input-container>
      </div>
      <kd-user-help>
        [[By default, your containers run the selected image's default entrypoint command. You can use the command options to override the default.|User help for the run command input on the deploy from settings page.]]
        <a href="http://kubernetes.io/docs/user-guide/containers/"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div class="md-block">
        <md-checkbox ng-model="$ctrl.runAsPrivileged"
                     class="md-primary">
          [[Run as privileged|Run as privileged label for the corresponding checkbox on the deploy from settings page.]]
        </md-checkbox>
      </div>
      <kd-user-help>
        [[Processes in privileged containers are equivalent to processes running as root on the host.|User help for the run as privileged checkbox input on the deploy from settings page.]]
        <a href="http://kubernetes.io/docs/user-guide/pods/#privileged-mode-for-pod-containers"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <kd-environment-variables variables="$ctrl.variables">
      </kd-environment-variables>
      <kd-user-help>
        [[Environment variables available for use in the container. Values can reference other variables using $(VAR_NAME) syntax.|User help for the environment variables section on the deploy from settings page.]]
        <a href="https://kubernetes.io/docs/tasks/inject-data-application/define-environment-variable-container/"
           target="_blank"
           tabindex="-1">
            [[Learn more|Learn more link on deploy from settings page.]] <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>
  </div>

  <div>
    <md-button class="md-primary kd-deploy-moreoptions-button"
               type="button"
               ng-click="$ctrl.switchMoreOptions()"
               ng-hide="$ctrl.isMoreOptionsEnabled()">
      [[Show advanced options|Show advanced options label that appears on deploy from settings page.]]
    </md-button>
    <md-button class="md-primary kd-deploy-moreoptions-button"
               type="button"
               ng-click="$ctrl.switchMoreOptions()"
               ng-show="$ctrl.isMoreOptionsEnabled()">
      [[Hide advanced options|Hide advanced options label that appears on deploy from settings page.]]
    </md-button>
  </div>

  <md-button class="md-raised md-primary kd-deploy-submit-button"
             type="submit"
             ng-disabled="$ctrl.isDeployDisabled()">
    [[Deploy|Deploy button label that appears on deploy from settings page.]]
  </md-button>

  <md-button class="md-primary kd-deploy-cancel-button"
             ng-click="$ctrl.cancel()">
    [[Cancel|Cancel button label that appears on deploy from settings page.]]
  </md-button>
</form>
